<template>
    <div>
        <!-- 头部导航 -->
        <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="goBack"></van-nav-bar>


        <!-- 主体区域 -->
        <div class="edit_area">

            <div class="input_area">
                <van-field label="入职日期" type="text" class="title_input" v-model="entryDate" readonly/>
            </div>
            <div class="input_area">
                <van-field label="工号" type="text" class="title_input" v-model="jobnum" readonly/>
            </div>
            <div class="input_area">
                <van-field label="姓名" type="text" class="title_input" v-model="user" readonly/>
            </div>
            <div class="input_area">
                <van-field label="部门名" type="text" class="title_input" v-model="deptName" readonly/>
            </div>
            <div class="input_area">
                <van-field label="消息周期" type="text" class="title_input" v-model="cycle" readonly/>
            </div>
            <div class="input_area">
                <van-field label="新人数据情况" type="textarea" class="title_input" v-model="condition" readonly/>
            </div>

        </div>

        <van-dialog v-model="show" show-cancel-button :before-close="chargeBtn">
            <!-- 输入框 -->
            <van-field v-model="reason" rows="1" autosize label="驳回原因" type="textarea" placeholder="请输入驳回原因"/>
        </van-dialog>

        <div class="controller_area">
            <van-button id="isAgree" v-bind:disabled="isShow" type="primary" size="normal" @click="submitAgree">{{message}}</van-button>
            <van-button id="isNotAgree" v-bind:disabled="isShow" type="warning" size="normal" @click="submitNotAgree">{{message1}}</van-button>
        </div>

    </div>
</template>
<script>
    import {Dialog, Toast} from "vant";
    import Vue from 'vue';
    Vue.use(Dialog);



    export default {

        data() {
            return {
                id:"",//入职管理对应的id
                sixid:"",//入职60天表数据对应的id
                entryDate: "",//入职时间
                jobnum:"",
                user:"",//用户名
                cycle:"",
                deptName:"",
                condition:"",//新人数据情况
                reason:"",//驳回原因

                title: "销售部入职管理",
                editManagement: '/mobiles/editSixManagement',

                isShow:false,
                message:"符合",
                message1:"驳回",
                show:false,
                agreeShow:false

            };
        },

        created() {
            this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
            this.id= this.$route.params.id;
            this.getManagementInfo();
        },

        methods: {

            //根据入职管理的id找到相对应的入职管理详情
            getManagementInfo(){
                this.$https.post('/mobiles/getSixManagerInfo',{
                    nowUser:this.nowUser,
                    id:this.id
                }).then((res)=>{
                    console.log(res.data.data);
                    this.entryDate=res.data.data.entryDate;
                    this.jobnum=res.data.data.jobnum;
                    this.user=res.data.data.user;
                    this.deptName=res.data.data.deptName;
                    this.cycle=res.data.data.cycle;
                    this.condition=res.data.data.conditions;
                    if (res.data.data.sixSubmit=='0'){
                        this.isShow=true;
                        this.message="已填写";
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            // 返回
            goBack() {
                this.$router.go(-1);
            },

            // 提交同意
            submitAgree() {
                if (!this.isConditionNull()) return false;
                this.show=false;
                this.$https.post('/mobiles/agreeSixManagement', {
                    userId:this.nowUser,
                    id:this.id,
                }).then(res => {
                    res;
                    Toast("已同意");
                    this.getManagementInfo();//找到对应的页面详情，及领导信息
                }).catch(err => {
                    console.log(err)
                });
            },
            //驳回
            submitNotAgree() {
                this.show=true;
            },
            chargeBtn(action,done){
                if (action==='cancel'){
                    done();
                }else if (action==='confirm'){
                    if (!this.isNull()){
                        done();
                        return false;
                    }
                    this.show=false;
                    this.$https.post('/mobiles/nagreeManagement', {
                        userId:this.nowUser,
                        id:this.id,
                        reason:this.reason,
                    }).then(res => {
                        res;
                        Toast("已驳回");
                        this.getManagementInfo();//找到对应的页面详情，及领导信息
                    }).catch(err => {
                        console.log(err)
                    });
                }
            },

            //判断相关数据是否为空
            isNull() {
                if (this.reason == '') {
                    this.$toast("请填写驳回原因");
                    return false;
                }

                return true;
            },
            isConditionNull() {
                if (this.condition == '') {
                    this.$toast("请填写新人数据情况");
                    return false;
                }

                return true;
            },

        },
    };
</script>

<style lang="scss" scoped>

    .title_input {
        width: 100%;
        box-sizing: border-box;
        padding-left: 3vw;
        margin-bottom: vw(20);
        line-height: vw(60);
        border: none;
        margin-top: vw(10);
    }

    .content_input {
        width: 100vw;
        border: none;
        height: 40vh;
        font-size: 24px;
        padding: 3vw;
        box-sizing: border-box;
    }

    .upload_area {
        text-align: left;
        width: 100%;
        padding: vw(20);
        box-sizing: border-box;
        background-color: white;
        margin-top: vw(10);
    }

    .hidden_area {
        width: 100vw;
        background-color: white;
        padding: vw(20) 3vw;
        box-sizing: border-box;
        margin-top: vw(10);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-flow: row nowrap;

        .hidden_name {
            display: flex;
            justify-content: center;
            align-items: center;

            & > div {
                margin-left: vw(20);
            }

            .random_btn {
                background-color: #e49;
                color: white;
                box-shadow: vw(10) vw(10) vw(30) #ccc;
                border-radius: vw(10);
                padding: vw(4) vw(20);
            }
        }
    }
    .input_area.dpet{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        .van-button{
            width: 20%;
        }
        input{
            width: 80%;
        }
    }
    .controller_area {
        width: 100vw;
        height: vw(100);
        background-color: white;
        position: fixed;
        left: 0;
        bottom: 0;
        border-top: 1px solid #ccc;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-end;
        padding: 0 5vw;
        box-sizing: border-box;
    }

    .van-cell {
        line-height: vw(60);
        font-size: 24px;
    }
</style>
